<template>
  <div id="monthchart" style="width: 100%;height: 600px;"/>
</template>
<script>
import echarts from 'echarts'
import i18n from '@/lang/index'
import chartApi from '@/api/chart'

export default {
  props: {
  },
  data() {
    return {
      name: 'monthchart',
      activeName: 'first',
      chart: null,
      selecttype: 'month'
    }
  },
  watch: {
    chartData: {
      deep: true,
      handler(val) {
        this.setOptions(val)
      }
    }
  },
  mounted() {
    this.initCharts()
    this.getdatabyday()
  },
  methods: {
    initCharts() {
      this.chart = echarts.init(this.$el)
      this.setOptions()
    },
    setOptions() {
      this.chart.setOption({
        title: {
          text: i18n.t('table.CustomerStatistic')
        },
        tooltip: {},
        xAxis: {
          data: []
        },
        yAxis: {},
        series: [{
          name: i18n.t('table.RepeatPurchaseRate'),
          type: 'line',
          data: []
        }]
      })
    },

    getdatabyday() {
      this.listLoading = true
      chartApi.getcustomerchart(this.selecttype).then(response => {
        const serviceResponse = response.data
        if (serviceResponse.code === 0) {
          var series1 = []
          var series2 = []

          const responsedata = serviceResponse.data

          for (const key in responsedata) {
            series1.push(key)
            series2.push(responsedata[key])
          }

          this.chart.setOption({
            title: {
              text: i18n.t('table.CustomerStatistic')
            },
            tooltip: {},
            xAxis: {
              data: series1
            },
            yAxis: {},
            series: [{
              name: i18n.t('table.RepeatPurchaseRate'),
              type: 'line',
              data: series2
            }]
          })
        }
      })
    }

  }
}
</script>
